<template>
<fieldset>
    <legend>购物车</legend>
    <h1>{{tag}}</h1>
    <ul>
        <li v-for="item in carts" :key="item.id">
        <span>产品名称</span>
        <b>{{item.title}}</b>
        ---
        <span>商品单价</span>
        <b>{{item.price}}</b>
        ---
         <span>数量</span>
         <b>{{item.count}}</b>
        </li>
    </ul>
    <h1 :style="{textAlign:'right'}">
            总价格:
            <span :style="{color:'red'}">{{total}}</span>
        </h1>
</fieldset>
</template>

<script>
import { mapState,mapGetters} from "vuex"
    export default {
        computed: {
            ...mapState('Cart', ['tag','carts']),
            ...mapGetters('Cart',['total'])
        }
    }
</script>